<template>
    <div class="home">
        <div class="Carousel">
            <el-carousel height="466px">
                <el-carousel-item>
                    <img
                        src="https://rs.dance365.com/photo/1667210329871.jpg"
                    />
                </el-carousel-item>
                <el-carousel-item>
                    <img
                        src="https://rs.dance365.com/photo/1667373574669.jpg"
                    />
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="card-list">
            <div class="channel-list">
                <div class="channel-scroll">
                    <router-link
                        :class="{ active: $route.path == '/index/recommend' }"
                        class="channel-item"
                        to="/index/recommend"
                    >
                        推荐
                    </router-link>
                    <router-link
                        :class="{ active: $route.path == '/index/production' }"
                        class="channel-item"
                        to="/index/production"
                        >作品
                    </router-link>
                    <router-link
                        :class="{ active: $route.path == '/index/course' }"
                        class="channel-item"
                        to="/index/course"
                        >教程
                    </router-link>
                    <router-link
                        :class="{ active: $route.path == '/index/soecial' }"
                        class="channel-item"
                        to="/index/soecial"
                        >专题
                    </router-link>
                    <router-link
                        :class="{ active: $route.path == '/index/dynamic' }"
                        class="channel-item"
                        to="/index/dynamic"
                        >动态
                    </router-link>
                    <router-link
                        :class="{ active: $route.path == '/index/focus' }"
                        class="channel-item"
                        to="/index/focus"
                        >关注
                    </router-link>
                    <span
                        class="channel-item"
                        v-for="hobby in passHobbyArr"
                        :key="hobby.id"
                        >{{ hobby.name }}</span
                    >
                </div>
                <span class="right-list" @click="showDialog">
                    <i class="iconfont icon-yingyong"></i> 选择兴趣技能</span
                >
            </div>
            <div class="content-list">
                <div class="content">
                    <router-view />
                </div>
            </div>
        </div>

        <el-dialog
            v-model="dialogFormVisible"
            :title="``"
            width="1040px"
            :before-close="handleClose"
        >
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header" v-if="!searchData.length">
                    <h4 :id="titleId" :class="titleClass">
                        {{ `选择我的兴趣技能 ${hobbyArr.length} / 7` }}
                    </h4>
                </div>
                <el-button
                    style="border: none; font-size: 18px"
                    @click="goBack"
                    v-else
                >
                    <el-icon class="el-icon--left">
                        <ArrowLeft />
                    </el-icon>
                    返回
                </el-button>
            </template>
            <span style="color: #b1b5c1; position: relative; top: -40px"
                >例如舞蹈就选舞种</span
            >
            <el-form :inline="true">
                <el-form-item>
                    <el-input
                        @input="search"
                        v-model="keyword"
                        style="width: 300px"
                        placeholder="搜索兴趣技能"
                        size="large"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        color="#f5f7f9"
                        :disabled="!keyword.trim().length"
                        type="primary"
                        size="large"
                        style="width: 60px; hsearchdataeight: 40px; color: #666"
                        @click="search"
                        >搜索</el-button
                    >
                </el-form-item>
            </el-form>
            <div v-if="!searchData.length">
                <ul v-show="hobbyArr.length" class="hobby-arr">
                    <li
                        class="hobby-item"
                        v-for="selHobby in hobbyArr"
                        :key="selHobby.id"
                    >
                        {{ selHobby.name }}
                        <span class="close-icon" @click="delHobby(selHobby)"
                            >✖</span
                        >
                    </li>
                </ul>
                <div>推荐兴趣技能</div>
                <div class="hobby-list">
                    <div class="hobby-list-content">
                        <div
                            class="hobby-item"
                            v-for="hobby in allHobbyArr"
                            :key="hobby.id"
                            :title="hobby.name"
                            @click="addHobby(hobby)"
                        >
                            {{ hobby.name }}
                            <span v-show="hobby.isSelect" class="select-icon"
                                >✔</span
                            >
                        </div>
                    </div>
                </div>
            </div>
            <div v-else>
                <div>搜索结果</div>
                <ul class="search-result">
                    <li
                        v-for="data in searchData"
                        :key="data.id"
                        @click="addHobby(data)"
                    >
                        <div class="love">
                            <span class="iconfont icon-star"></span>
                        </div>
                        <div class="content">
                            <div>{{ data.name }}</div>
                            <span>{{ data.description }}</span>
                        </div>
                        <div
                            style="
                                line-height: 44px;
                                position: absolute;
                                right: 20px;
                            "
                            class="add-icon"
                        >
                            <span
                                style="
                                    font-size: 18px;
                                    color: #999;
                                    font-weight: 600;
                                "
                                class="iconfont icon-jiahao"
                            ></span>
                        </div>
                    </li>
                </ul>
            </div>

            <template #footer>
                <span class="dialog-footer" v-if="!searchData.length">
                    <el-button
                        class="concle"
                        style="width: 130px; height: 40px"
                        @click="onCancel"
                        >取消</el-button
                    >
                    <el-button
                        color="#f93684"
                        style="width: 130px; height: 40px"
                        size="large"
                        type="primary"
                        @click="onSave"
                    >
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <div class="backTop">
            <el-backtop right="100">
                <div class="backtop">
                    <img
                        src="https://rs.dance365.com/img/back_top@3x.e71cd044.png"
                        alt=""
                    />
                </div>
            </el-backtop>
        </div>
    </div>
</template>

<script lang="ts">
export default {
    name: "Home",
    components: { RouterLink },
};
</script>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted, reactive, ref } from "vue";
import homeApi, { type SearchModel } from "@/api/mockHome";
import { RouterLink } from "vue-router";
import { debounce } from "lodash";

//选择兴趣技能逻辑__________
const allHobbyArr = ref([
    {
        name: "中国舞",
        id: "ff80808167bef94f0167bf6f6e0a1fd2",
        isSelect: false,
    },
    {
        name: "古典舞",
        id: "402881ed649d628e01649d636ea7005b",
        isSelect: false,
    },
    {
        name: "原创编舞",
        id: "ff80808167d9dd620167e457f899789a",
        isSelect: false,
    },
    {
        name: "爵士舞",
        id: "402881ed649d628e01649d636ea70057",
        isSelect: false,
    },
    {
        name: "流行热舞",
        id: "402881ed649d628e01649d636ea80065",
        isSelect: false,
    },
    {
        name: "成人舞蹈",
        id: "ff8080816960e987016962b2af0f5323",
        isSelect: false,
    },
    {
        name: "少儿舞蹈",
        id: "402881ed649d628e01649d636ea80067",
        isSelect: false,
    },
    {
        name: "街舞",
        id: "402881ed649d628e01649d636ea60056",
        isSelect: false,
    },
    {
        name: "民族舞",
        id: "402881ed649d628e01649d636ea7005a",
        isSelect: false,
    },
    {
        name: "热门舞蹈",
        id: "ff808081683f378701687690e06e66ac",
        isSelect: false,
    },
    {
        name: "中国风",
        id: "ff80808167c026c90167c1fbde74258b",
        isSelect: false,
    },
    {
        name: "民族民间舞",
        id: "ff8080816a9f772a016ab929bd056c95",
        isSelect: false,
    },
    {
        name: "基本功",
        id: "ff80808167effef30167f390c2bf6b63",
        isSelect: false,
    },
    {
        name: "肚皮舞",
        id: "402881ed649d628e01649d636ea7005f",
        isSelect: false,
    },
    {
        name: "儿童舞蹈",
        id: "ff80808167c6b44f0167c9ec35630d8e",
        isSelect: false,
    },
    {
        name: "东方舞",
        id: "ff808081682b399d0168307bc5f64c75",
        isSelect: false,
    },
]);

//是否显示兴趣弹窗
const dialogFormVisible = ref(false);

//是否选中兴趣标签
const isSelect = ref(false);
// 用来选中的渲染兴趣列表的数组
const hobbyArr = ref<any[]>([]);
// 保存搜索的数据
const searchData = ref<SearchModel[]>([]);
// 搜索的关键字
const keyword = ref("");
// 二级菜单元素
const menuRef = ref();
const isShowBackIcon = ref(false);
// 用于中间传递已选中兴趣列表的数组的数据
const passHobbyArr = ref<any[]>([]);

const search = async () => {
    if (!keyword.value.trim().length) return;
    try {
        let result = await homeApi.getSearch();
        searchData.value = result;
    } catch (error) {
        ElMessage.error("获取搜索结果失败");
    }
};

// 显示对话框的回调
const showDialog = () => {
    dialogFormVisible.value = true;
    hobbyArr.value = [...passHobbyArr.value];

    // 双层遍历找到当前已选择兴趣标签数组中对应的数据,把数据的选中状态改变
    hobbyArr.value.forEach((item: any, index: number) => {
        allHobbyArr.value.forEach((item2: any, index: number) => {
            if (item.name === item2.name) {
                item2.isSelect = true;
            }
        });
    });
};

// 确定按钮的回调
const onSave = () => {
    // 点击保存按钮的时候另存一份
    passHobbyArr.value = hobbyArr.value;
    hobbyArr.value = [];
    // 关闭对话框
    dialogFormVisible.value = false;
    searchData.value = [];
    keyword.value = "";
};
// 取消按钮的回调
const onCancel = () => {
    hobbyArr.value = [];
    // 关闭对话框
    dialogFormVisible.value = false;
    searchData.value = [];
    keyword.value = "";
};
// 返回兴趣标签列表页的回调
const goBack = () => {
    // 清空搜索结果数组和关键字
    searchData.value = [];
    keyword.value = "";
};
// 关闭对话框之前的回调
const handleClose = (done: () => void) => {
    // 关闭之前清除对话框内容
    onCancel();
    done();
};
// 添加兴趣标签
const addHobby = (hobby: any) => {
    if (hobbyArr.value.length === 7 && !hobby.isSelect) {
        ElMessage.error("最多只能添加7个");
        return;
    }
    if (hobby.isSelect) {
        // console.log('删除', hobby.isSelect);
        // 修改当前点击的兴趣标签的选中状态
        // hobby.isSelect = false;
        // 删除当前点击的兴趣标签
        hobbyArr.value.forEach((item: any, index: number) => {
            if (item.name === hobby.name) {
                hobbyArr.value.splice(index, 1);
            }
        });
        const allItem = allHobbyArr.value.find(
            (item) => item.name === hobby.name
        );
        if (allItem) {
            allItem.isSelect = false;
        }
    } else {
        // 针对搜索功能判断添加是否重复
        const isRepeat = hobbyArr.value.findIndex(
            (item) => item.name === hobby.name
        );
        if (isRepeat >= 0) {
            alert("已添加");
            return;
        }
        // console.log('增加', hobby.isSelect);
        // 修改当前点击的兴趣标签的选中状态
        hobby.isSelect = true;
        // 向 hobbyArr 数组中添加选中的兴趣标签
        hobbyArr.value.push(hobby);
        // 显示兴趣列表页面
        searchData.value = [];
        // 清空输入框内容
        keyword.value = "";
    }
};

// 删除兴趣标签的回调
const delHobby = (selHobby: any) => {
    addHobby(selHobby);
};

//轮播图数据渲染
// let CarouselList = ref([])

// const getCarousel = async () => {
//   try {
//     let result = await homeApi.getCarousel()
//     CarouselList = result.data
//     console.log(CarouselList)
//   } catch (error) {
//     console.log(error)
//   }
// }

onMounted(() => {
    // getCarousel()
});
</script>

<style scoped lang="scss">
.home {
    /* width: 1200px; */
    margin: 0 auto;
}

/* 轮播图样式 */
.Carousel {
    width: 1200px;
    padding-top: 20px;
    margin: 0 auto;
}

.el-carousel__item img {
    width: 100%;
    height: 100%;
}

::v-deep(.el-carousel__button) {
    width: 12px;
    height: 12px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 10px;
}

/* 视频导航 */
.card-list {
}

.channel-list {
    height: 80px;
    height: 100%;
    width: 1200px;
    margin: 0 auto;
    position: relative;
}

.channel-list .channel-scroll {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.channel-list .channel-item {
    padding: 20px 4px;
    margin: 0 20px;
    text-align: center;
    color: #7d8090;
}

.right-list {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    height: 80px;
    line-height: 80px;
    color: rgb(125, 128, 144);
}

.channel-item.active {
    color: #000;
    border-bottom: #000 solid 3px;
}

/* 列表 */
.content-list {
    width: 100%;
    background-color: #f5f7f9;
    margin-top: 10px;
}

.content-list .content {
    width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
}

::v-deep(.el-input .el-input--small .el-input--prefix) {
    background-color: #f5f7f9;
}

::v-deep(.el-input__inner) {
    background-color: #f5f7f9;
}

.el-button.concle:hover {
    color: #f93684;
    border: 1px solid #fb66a2;
    background-color: #feebf3;
}

.hobby-list {
    margin-top: 15px;
    width: 100%;
    height: 340px;
    // border: 1px solid red;
    overflow: auto;

    .hobby-list-content {
        display: flex;
        flex-wrap: wrap;
        padding-top: 10px;

        .select-icon {
            position: absolute;
            top: -8px;
            right: -8px;
            text-align: center;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            line-height: 20px;
            background-color: #f93684;
            color: #fff;
            cursor: pointer;
        }
    }
}

.hobby-arr {
    display: flex;
    padding: 20px 0;
    flex-wrap: wrap;

    .close-icon {
        position: absolute;
        top: -8px;
        right: -8px;
        text-align: center;
        width: 20px;
        height: 20px;
        line-height: 20px;
        border-radius: 50%;
        background-color: #aaa;
        color: #fff;
        cursor: pointer;
    }
}

.hobby-item {
    width: 100px;
    height: 40px;
    line-height: 40px;
    border: 1px solid #eaecf0;
    border-radius: 4px;
    margin: 0 22px 21px 0;
    display: inline-block;
    font-size: 12px;
    color: #000;
    text-align: center;
    position: relative;
}

.subPage {
    background-color: #f5f7f9;
    padding: 20px 0;
    width: 1200px;
    margin: 0 auto;
}

.search-result {
    display: flex;
    // justify-content: center;
    flex-wrap: wrap;

    li {
        width: 300px;
        height: 68px;
        background-color: #f5f7f9;
        border-radius: 5px;
        margin-right: 20px;
        margin-bottom: 20px;
        padding: 12px;
        display: flex;
        position: relative;

        &:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }

        .love {
            width: 44px;
            height: 44px;
            background-color: #fff;
            text-align: center;
            line-height: 44px;
            margin-right: 10px;
        }

        .content {
            div {
                font-weight: 100;
                font-size: 16px;
                // color: #999;
                margin-bottom: 4px;
            }

            .add-icon {
                height: 44px;
                width: 16px;
                line-height: 44px;
                position: absolute;
                right: 20px;

                .iconfont {
                    font-weight: 600;
                    margin-top: 14px;
                    height: 44px;
                    line-height: 44px;
                }
            }

            span {
                font-size: 14px;
                color: #999;
            }
        }
    }

    li:nth-child(3n) {
        margin-right: 0;
    }
}

.backTop {
    height: 40px;
    width: 40px;
    cursor: pointer;

    img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
    }
}

::v-deep(.el-icon .el-dialog__close:hover) {
    color: #f93684;
}
</style>
